<template>
  <div :class="['skill_page','color-'+$store.state.color]">
    <IndexNav></IndexNav>
    <div class="skill_page_main">
      <SkillPageMenu v-on:getType="getSectionType"></SkillPageMenu>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import IndexNav from "../../components/skill/index/index_nav.vue";
import SkillPageMenu from "../../components/skill/skill_page/skill_page_menu";
export default {
  name: "skill_page",
  components: {SkillPageMenu,IndexNav},
  data() {
    return {

    }
  },
  methods: {
    getSectionType(type) {
      if (type === "note") {
        this.$router.push("/skillPage/"+this.$route.params.id+"/note/list");
      } else if (type === "questions"){
        this.$router.push("/skillPage/"+this.$route.params.id+"/questions/list");
      } else {
        this.$router.push("/skillPage/"+this.$route.params.id+"/"+type);
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.skill_page {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  .skill_page_main {
    padding-top: 80px;
  }
}
.color-1{
  background: radial-gradient(circle at 50% 150%,hotpink, darkblue);
}
.color-2 {
  background: linear-gradient(slateblue, cornflowerblue);
}
.color-3{
  background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898; background-blend-mode: multiply,multiply;
}
.color-4 {
  background: url('../../assets/images/background.jpg') no-repeat center / cover ;
}
</style>
